[FEAT/#13] 버튼 컴포넌트 구현 by taegeon2 · Pull Request #14 · ASSU-dev/ASSU_FE_RN

taegeon2 · 2026-02-18T19:25:47Z

📝 요약

Figma의 components의 버튼 컴포넌트들을 구현했습니다.

⚙️ 작업 내용

small_button 구현
medium_button 구현
large_button 구현

🔗 관련 이슈

Closes [FEAT/#13] 버튼 컴포넌트 구현 #13

✅ 체크리스트

코딩 컨벤션(Biome/Lint)을 준수하였습니다.
모든 타입 에러를 해결하였습니다. (Typecheck)
변경 사항에 대한 테스트를 마쳤습니다.
불필요한 로그(console.log)를 제거하였습니다.

💬 리뷰어에게

github-actions · 2026-02-18T19:26:00Z

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

gemini-code-assist · 2026-02-18T19:26:05Z

Summary of Changes

Hello @taegeon2, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 Figma 디자인 시스템에 맞춰 Small, Medium, Large 세 가지 크기의 버튼 컴포넌트를 구현하여 재사용 가능한 UI 요소를 제공합니다. 이를 통해 애플리케이션 전반에 걸쳐 일관된 사용자 경험을 유지하고 개발 효율성을 높일 수 있습니다.

Highlights

버튼 컴포넌트 구현: Figma 디자인 시스템에 맞춰 Small, Medium, Large 세 가지 크기의 버튼 컴포넌트가 구현되었습니다.
버튼 컴포넌트 문서화: 각 버튼 컴포넌트의 사용법, 속성, 예시를 담은 buttons.md 파일이 추가되어 개발자들이 쉽게 활용할 수 있도록 했습니다.
예시 화면 추가: 메인 화면(HomeScreen)에 새로 구현된 버튼 컴포넌트들의 실제 사용 예시가 추가되어 동작을 확인할 수 있습니다.

Changelog

.gitignore
- Claude 관련 파일(.claudeignore, CLAUDE.md, CONVENTION.md)이 .gitignore에 추가되었습니다.
src/app/(tabs)/index.tsx
- LargeButton, MediumButton, SmallButton 컴포넌트가 임포트되었습니다.
- 새로 구현된 버튼 컴포넌트들의 사용 예시가 화면에 추가되었습니다.
src/shared/ui/buttons/buttons.md
- SmallButton, MediumButton, LargeButton 컴포넌트에 대한 상세 문서가 추가되었습니다.
src/shared/ui/buttons/large_button.tsx
- 제목과 설명을 포함하며 토글 기능을 가진 LargeButton 컴포넌트가 구현되었습니다.
src/shared/ui/buttons/medium_button.tsx
- 중형 액션 버튼인 MediumButton 컴포넌트가 구현되었습니다.
src/shared/ui/buttons/small_button.tsx
- 소형 버튼인 SmallButton 컴포넌트가 구현되었습니다.
src/shared/utils/formatDate.ts
- 함수 시그니처의 타입 정의에 쉼표가 추가되었습니다.

Activity

Figma 디자인 기반의 버튼 컴포넌트 구현 작업이 완료되었습니다.
Small, Medium, Large 버튼 컴포넌트가 각각 구현되었습니다.
이슈 #13이 해결되었습니다.
작업 내용에 대한 시각적 자료(스크린샷)가 제공되었습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

이 PR은 SmallButton, MediumButton, LargeButton 세 가지 새로운 버튼 컴포넌트를 구현하고 관련 문서를 추가했습니다. index.tsx 파일에 새로운 버튼 컴포넌트들의 사용 예시가 추가되었으며, formatDate.ts 파일에는 사소한 형식 변경이 있었습니다. 전반적으로 잘 구조화된 변경사항이며, 컴포넌트 라이브러리에 긍정적으로 기여합니다.

gemini-code-assist · 2026-02-18T19:27:46Z

src/shared/ui/buttons/BenefitSelectButton.tsx

+			className={`
+        w-[21.5625rem] py-[0.6875rem] flex flex-col items-center rounded-[0.625rem] border-[0.5px]
+        ${
+					isSelected
+						? "border-[var(--color-primary)] bg-[var(--color-primary-tint)]"
+						: "border-[var(--color-content-secondary)] bg-[var(--color-neutral)]"
+				}
+      `}


조건부 Tailwind CSS 클래스를 사용하는 className 문자열이 길어져 가독성이 저하될 수 있습니다. clsx와 같은 유틸리티를 사용하면 조건부 클래스를 더 깔끔하게 관리하고 가독성을 높일 수 있습니다.

Suggested change

className={`

w-[21.5625rem] py-[0.6875rem] flex flex-col items-center rounded-[0.625rem] border-[0.5px]

${

isSelected

? "border-[var(--color-primary)] bg-[var(--color-primary-tint)]"

: "border-[var(--color-content-secondary)] bg-[var(--color-neutral)]"

}

`}

className={clsx(

"w-[21.5625rem] py-[0.6875rem] flex flex-col items-center rounded-[0.625rem] border-[0.5px]",

isSelected

? "border-[var(--color-primary)] bg-[var(--color-primary-tint)]"

: "border-[var(--color-content-secondary)] bg-[var(--color-neutral)]"

)}

gemini-code-assist · 2026-02-18T19:27:46Z

src/shared/ui/buttons/ActionButton.tsx

+	//PressableProps: 버튼 컴포넌트의 속성을 정의
+	children: ReactNode; // ReactNode: 모든 타입의 자식 요소를 허용


PressableProps와 ReactNode에 대한 주석은 불필요하게 코드를 복잡하게 만들 수 있습니다. 이들은 일반적으로 TypeScript 개발자들에게 익숙한 표준 타입이므로, 주석 없이도 충분히 이해할 수 있습니다. 코드를 더 간결하게 유지하기 위해 제거하는 것을 고려해 보세요.

interface Props extends PressableProps { children: ReactNode; }

gemini-code-assist · 2026-02-18T19:27:46Z

src/shared/ui/buttons/buttons.md

+
+## LargeButton
+
+제목 + 설명을 포함하는 토글형 대형 버튼입니다. 클릭 시 선택/해제 상태가 전환됩니다.


LargeButton이 "클릭 시 선택/해제 상태가 전환됩니다"라고 설명되어 있지만, 이 isSelected 상태가 외부에서 제어 가능한지 또는 단순히 내부 상태인지 명확하지 않습니다. 사용자가 이 상태를 초기화하거나 외부에서 제어할 수 있는 selected prop과 같은 것이 있는지 문서에 추가하면 컴포넌트 사용에 도움이 될 것입니다.

large_button의 경우 모바일에서 클릭 시 색이 변한다는 것을 의미였습니다!

chunjaemin · 2026-02-21T07:09:09Z

태건님, 컴포넌트 작업해주시느라 정말 고생하셨습니다! 깔끔하게 잘 만들어주셨네요. :)

작업하신 내용 보면서 같이 논의해보면 좋을 포인트가 두 개 정도 있어서 남겨드려요.

파일 이름)
Small, Medium, Large처럼 크기 위주로 명명되어 있는데, 각 버튼이 수행하는 역할(기능)이 다르다 보니 이름만으로 용도를 파악하기 조금 어려운 것 같아요. 각 버튼의 역할이 드러나도록 이름을 수정해보는 건 어떨까요?

SelectionGroup 컴포넌트)
현재 LargeButton은 독립적인 토글 방식인데, 피그마 상에서는 여러 옵션 중 하나만 선택하는 라디오 그룹의 동작을 기대하고 있더라고요. 지금 구조로는 부모 컴포넌트에서 매번 복잡한 로직을 짜야 해서 중복 코드가 생기지 않을까 싶어요!
대신 SelectionGroup 같은 공용 컴포넌트를 만들어 옵션 배열만 넘겨주면 자동으로 그려지도록 구조를 잡으면 사용하기 간편할 것 같은데 어떠실까요?

이런 느낌으로 하면 더 간편하게 사용 가능할 것 같다는 생각이 들었어요

보시고 편하게 의견 주세요!

taegeon2 · 2026-02-21T15:50:17Z

태건님, 컴포넌트 작업해주시느라 정말 고생하셨습니다! 깔끔하게 잘 만들어주셨네요. :)

작업하신 내용 보면서 같이 논의해보면 좋을 포인트가 두 개 정도 있어서 남겨드려요.

파일 이름) Small, Medium, Large처럼 크기 위주로 명명되어 있는데, 각 버튼이 수행하는 역할(기능)이 다르다 보니 이름만으로 용도를 파악하기 조금 어려운 것 같아요. 각 버튼의 역할이 드러나도록 이름을 수정해보는 건 어떨까요?

SelectionGroup 컴포넌트) 현재 LargeButton은 독립적인 토글 방식인데, 피그마 상에서는 여러 옵션 중 하나만 선택하는 라디오 그룹의 동작을 기대하고 있더라고요. 지금 구조로는 부모 컴포넌트에서 매번 복잡한 로직을 짜야 해서 중복 코드가 생기지 않을까 싶어요! 대신 SelectionGroup 같은 공용 컴포넌트를 만들어 옵션 배열만 넘겨주면 자동으로 그려지도록 구조를 잡으면 사용하기 간편할 것 같은데 어떠실까요?

이런 느낌으로 하면 더 간편하게 사용 가능할 것 같다는 생각이 들었어요

보시고 편하게 의견 주세요!

좋은 의견 감사합니다!

파일 이름의 경우 따로 명칭을 뭐라할지 생각이 안나서 피그마에 있는 각 컴포넌트의 명칭을 그대로 사용했습니다. 만약 저 세 버튼들이 주어진 크기로 인증 완료, 학생회 인증.. 등등의 상황에서만 사용된다면 말씀하신대로 컴포넌트 이름은 수정하겠습니다.
말씀하신 대로 피그마 확인해보니 해당 버튼들이 라디오 버튼처럼 활용되는 점 확인했습니다!!
23일 중에 수정하도록 하겠습니다.

부족한 부분 지적 감사합니다!

taegeon2 added 3 commits February 19, 2026 01:58

[FEAT/#13] 버튼 컴포넌트 구현

1ac1c82

[FEAT/#13] 공통 컴포넌트 버튼 구현 완료

a275a46

[CHORE/#13] yarn 명령어를 통한 품질 체크

e15c67e

taegeon2 self-assigned this Feb 18, 2026

github-actions bot added the feature 새로운 기능 구현 label Feb 18, 2026

gemini-code-assist bot reviewed Feb 18, 2026

View reviewed changes

taegeon2 and others added 2 commits February 22, 2026 01:13

[CHORE/#13] 버튼 컴포넌트 파일명 수정

641182e

[ADD/#13] 제휴 선택 버튼 라디오버튼화 적용

a254cf8

kimyw1018 approved these changes Feb 22, 2026

View reviewed changes

eunhyekimyeah approved these changes Feb 22, 2026

View reviewed changes

taegeon2 merged commit 1b21e2c into develop Feb 22, 2026
5 checks passed

taegeon2 deleted the feat/#13-button branch February 22, 2026 13:52

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Comments

[FEAT/#13] 버튼 컴포넌트 구현#14

[FEAT/#13] 버튼 컴포넌트 구현#14
taegeon2 merged 5 commits intodevelopfrom
feat/#13-button

taegeon2 commented Feb 18, 2026

Uh oh!

github-actions bot commented Feb 18, 2026

Uh oh!

gemini-code-assist bot commented Feb 18, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Feb 18, 2026

Uh oh!

gemini-code-assist bot Feb 18, 2026

Uh oh!

gemini-code-assist bot Feb 18, 2026

Uh oh!

taegeon2 Feb 21, 2026

Uh oh!

chunjaemin commented Feb 21, 2026

Uh oh!

taegeon2 commented Feb 21, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

		//PressableProps: 버튼 컴포넌트의 속성을 정의
		children: ReactNode; // ReactNode: 모든 타입의 자식 요소를 허용


		## LargeButton

		제목 + 설명을 포함하는 토글형 대형 버튼입니다. 클릭 시 선택/해제 상태가 전환됩니다.

Comments

Conversation

taegeon2 commented Feb 18, 2026

📝 요약

⚙️ 작업 내용

🔗 관련 이슈

✅ 체크리스트

💬 리뷰어에게

Uh oh!

github-actions bot commented Feb 18, 2026

Uh oh!

gemini-code-assist bot commented Feb 18, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Feb 18, 2026

Choose a reason for hiding this comment

Uh oh!

taegeon2 Feb 21, 2026

Choose a reason for hiding this comment

Uh oh!

chunjaemin commented Feb 21, 2026

Uh oh!

taegeon2 commented Feb 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

taegeon2 commented Feb 21, 2026 •

edited

Loading